<template>
  <div class="wrapper">
    <commonHeader></commonHeader>
    <commonAside></commonAside>
    <section id="content">
      <div class="inner-wrapper">
        <div class="main-content">
          <div class="feature clear-fix">
            <div class="feature-left">
              <div class="img-wrapper"><img src="../../../static/image/sys.png"/></div>
              <div class="sys-wrapper">
                <H4 class="sys-time">系统时间:08:25:35</H4>
                <div class="sys-desc clear-fix">
                  <div class="sys-title">授权状态:<span class="sys-content">OK</span></div>
                  <div class="sys-title">后台任务数量:<span class="sys-content">12</span></div>
                  <div class="sys-title">授权状态:<span class="sys-content">Enabled</span></div>
                  <div class="sys-title">Fault状态:<span class="sys-content">OK</span></div>
                  <div class="sys-title">运行状态:<span class="sys-content">2天08小时25分35秒</span></div>
                  <div class="sys-title">Child Fault:<span class="sys-content">OK</span></div>
                </div>
              </div>
            </div>
            <div id="sys-state" style="width:320px; height:160px" class="sys-state"></div>
          </div>
          <ul class="index-nav clear-fix">
            <li class="nav-link"><a href="#/ctrl/controller_show">
              <div class="link-content clear-fix">
                <div class="left-wrapper">
                  <h2>控制器</h2><span>Controllers</span>
                </div>
                <div class="right-wrapper">
                  <div class="icon-wrapper"><i class="icon icon-nav1"></i></div>
                </div>
              </div>
            </a></li>
            <li class="nav-link"><a href="#/phy/phy_show">
              <div class="link-content clear-fix">
                <div class="left-wrapper">
                  <h2>物理盘</h2><span>Physical Disks</span>
                </div>
                <div class="right-wrapper">
                  <div class="icon-wrapper"><i class="icon icon-nav2"></i></div>
                </div>
              </div>
            </a></li>
            <li class="nav-link"><a href="#/pool/pool_show">
              <div class="link-content clear-fix">
                <div class="left-wrapper">
                  <h2>存储池</h2><span>Pools</span>
                </div>
                <div class="right-wrapper">
                  <div class="icon-wrapper"><i class="icon icon-nav3"></i></div>
                </div>
              </div>
            </a></li>
            <li class="nav-link"><a href="#/virtual/vir_show">
              <div class="link-content clear-fix">
                <div class="left-wrapper">
                  <h2>虚拟盘</h2><span>Virtual Disks</span>
                </div>
                <div class="right-wrapper">
                  <div class="icon-wrapper"><i class="icon icon-nav4"></i></div>
                </div>
              </div>
            </a></li>
            <li class="nav-link"><a href="#/encl/enclosure_show">
              <div class="link-content clear-fix">
                <div class="left-wrapper">
                  <h2>设备柜</h2><span>Enclosures</span>
                </div>
                <div class="right-wrapper">
                  <div class="icon-wrapper"><i class="icon icon-nav5"></i></div>
                </div>
              </div>
            </a></li>
            <li class="nav-link"><a href="#/application/app_show">
              <div class="link-content clear-fix">
                <div class="left-wrapper">
                  <h2>应用</h2><span>Applications</span>
                </div>
                <div class="right-wrapper">
                  <div class="icon-wrapper"><i class="icon icon-nav6"></i></div>
                </div>
              </div>
            </a></li>
            <li class="chart-area">
              <div class="chart-wrapper">
                <div id="storage" style="width:100%;height:100%" class="chart"></div>
              </div>
            </li>
            <li class="chart-area">
              <div class="chart-wrapper">
                <div class="chart">
                  <div class="fan-wrapper">
                    <div class="icon-wrapper active"><i class="icon-fan"></i></div>
                    <div class="icon-wrapper"><i class="icon-fan"></i></div>
                    <div class="icon-wrapper active"><i class="icon-fan"></i></div>
                    <div class="icon-wrapper"><i class="icon-fan"></i></div>
                    <div class="icon-wrapper"><i class="icon-fan"></i></div>
                    <div class="icon-wrapper"><i class="icon-fan"></i></div>
                  </div>
                </div>
              </div>
            </li>
            <li class="chart-area">
              <div class="chart-wrapper">
                <div id="pools" style="width:100%;height:100%" class="chart"></div>
              </div>
            </li>
            <li class="chart-area">
              <div class="chart-wrapper">
                <div id="memory" style="width:100%;height:100%" class="chart"></div>
              </div>
            </li>
          </ul>


        </div>
      </div>
    </section>
  </div>
</template>
<script>
  import commonHeader from './../../components/header/header.vue'
  import commonAside from './../../components/aside/aside.vue'
  import echarts from 'echarts'
  export default {
    name: 'home',
    components: {
      commonHeader,
      commonAside
    },
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        stateWriteData: [10, 12, 620, 54, 260, 830, 710],
        stateReadData: [85, 454, 86, 100, 785, 125, 565]
      }
    },
    mounted () {
      this._initState()
      this._initStorage()
      this._initPools()
      this._initMemory()
    },
    methods: {
      _initState () {
        let state = echarts.init(document.getElementById('sys-state'))
        let stateOption = {
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            show: true,
            width: 280,
            height: 130,
            top: 10,
            right: 0,
            left: 0,
            bottom: 0
          },
          legend: {
            data: ['read', 'write'],
            left: '10',
            bottom: '0'
          },
          xAxis: {
            show: false,
            type: 'category',
            boundaryGap: false,
            data: ['08', '10', '12', '14', '16', '18', '20']
          },
          yAxis: {
            show: false,
            type: 'value'
          },
          color: ['#cddc39', '#80d8ff'],
          series: [{
            name: 'read',
            type: 'line',
            smooth: true,
            areaStyle: {
              normal: {
                color: 'rgba(205,220,57,0.8)'
              }
            },
            data: this.stateReadData
          }, {
            name: 'write',
            type: 'line',
            smooth: true,
            areaStyle: {
              normal: {
                color: 'rgba(100,181,246,0.8)'
              }
            },
            data: this.stateWriteData
          }]
        }
        state.setOption(stateOption)
      },
      _initStorage () {
        var storage = echarts.init(document.getElementById('storage'))
        var percent = 0.75

        function getData () {
          return [{
            name: '已用内存',
            value: percent * 100
          }, {
            name: '剩余内存',
            value: (1 - percent) * 100
          }]
        }

        var option = {
          title: {
            text: (percent * 100) + '%',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#64b5f6',
              fontWeight: 'bolder',
              fontSize: 32
            }
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            bottom: 'bottom',
            data: ['已用内存', '剩余内存']
          },
          series: [{
            name: '已用内存',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            stillShowZeroSum: false,
            startAngle: 180,
            color: ['#64b5f6', '#e0e0e0'],
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              normal: {
                show: true,
                borderColor: 'transparent',
                borderWidth: '20'
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: getData()
          }]
        }
        setInterval(function () {
          percent = parseInt(Math.random())
          storage.setOption(option, true)
        }, 1000)
      },
      _initPools () {
        var pools = echarts.init(document.getElementById('pools'))
        var poolsOption = {
          title: {
            text: '存储池状态',
            left: '10',
            bottom: '10',
            textStyle: {
              color: '#999',
              fontSize: '12',
              fontWeight: '200'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
            {
              name: '存储池状态',
              type: 'pie',
              radius: '70%',
              center: ['50%', '50%'],
              data: [
                {value: 4, name: 'Dead'},
                {value: 6, name: 'Alive'}
              ].sort(function (a, b) {
                return a.value - b.value
              }),
              color: ['#e0e0e0', '#64b5f6'],
              roseType: 'radius',
              label: {
                normal: {
                  show: true
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200
              }
            }
          ]
        }
        pools.setOption(poolsOption)
      },
      _initMemory () {
        var memory = echarts.init(document.getElementById('memory'))
        var memoryOption = {
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          title: {
            text: '内存占用',
            left: '10',
            bottom: '10',
            textStyle: {
              color: '#999',
              fontSize: '12',
              fontWeight: '200'
            }
          },
          series: [
            {
              name: '内存占用',
              type: 'gauge',
              min: 0,
              max: 100,
              splitNumber: 10,
              radius: '70%',
              axisLine: {
                lineStyle: {
                  width: 20,
                  color: [[0.6, '#8df5c5'], [0.9, '#ebcb7d'], [1, '#f73c3c']]
                }
              },
              axisTick: {
                length: 10,
                lineStyle: {
                  width: 1,
                  color: '#64b5f6'
                }
              },
              splitLine: {
                length: 25,
                lineStyle: {
                  color: '#3a6f99',
                  width: 1
                }
              },
              pointer: {
                length: '65%',
                width: 5
              },
              detail: {
                formatter: '{value}%',
                textStyle: {
                  fontSize: 13
                }
              },
              data: [{value: 50, name: '占用率'}]
            }
          ]
        }

        setInterval(function () {
          memoryOption.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
          memory.setOption(memoryOption, true)
        }, 2000)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"  rel="stylesheet/scss">
  body{
    background: #f5f5f5;
  }
</style>
